<template>
  <div class="fixed-zbest search">
    <header class="header">
      <van-search
        v-model="keyword"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
    </header>
    <div class="search-map" v-if="!showSearchHint">
      <section class="hot-search" title="热门搜索" v-if="hotSearch">
        <div class="hot-search-title">热门搜索</div>
        <div class="hot-content">
          <div
            class="hot-item"
            @click="keyword = hot.name"
            v-for="(hot, index) in hotSearch"
            :key="index"
            @click.stop="toDetail(hot)"
          >
            <div class="hot-item-index">{{ index + 1 }}</div>
            <div class="hot-item-name">{{ hot.name }}</div>
          </div>
        </div>
      </section>
      <section class="history-search">
        <div class="history-search-title">
          <div>最近搜索</div>
          <van-icon @click.stop="clearHistory" class="icon" name="delete-o" />
        </div>
        <div class="history-content">
          <div class="history-item" v-for="(item,index) in searchHistory" :key="index" @click.stop="toDetail(item)">{{item.title}}</div>
        </div>
      </section>
    </div>
    <div class="search-hint" v-else-if="showSearchHint && !showSearchDetail">
      <div class="search-hint-item">
        <van-icon class="icon" name="search" />
        <div class="text">
          搜索 " <span>{{ this.keyword }}</span> "
        </div>
      </div>
      <div v-for="(searchHint, index) in searchHintList" :key="index">
        <div
          class="search-hint-item"
          v-if="!searchHint?.showDetail"
          @click.stop="toDetail(searchHint)"
        >
          <div class="img-box">
            <svg
              t="1677489899886"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8449"
              width="16"
              height="16"
            >
              <path
                d="M891.2 98.1H649.7c-56.4 0-106.5 27.2-138 69.1-31.5-41.9-81.6-69.1-138-69.1H132.3c-38 0-69 30.9-69 69v638.1c0 38 30.9 69 69 69h253.6c33.8 33.1 78.9 51.7 125.8 51.7s92-18.7 125.8-51.7h253.6c38 0 69-30.9 69-69V167.1c0.1-38.1-30.8-69-68.9-69z m21.4 692.7c0 18.2-14.8 33-33 33H629c-10.6 0-20.7 4.7-27.7 12.8-22.8 26.8-55.4 42.2-89.5 42.2s-66.7-15.4-89.5-42.2c-6.9-8.2-17-12.8-27.7-12.8H143.9c-18.2 0-33-14.8-33-33V178.1c0-18.2 14.8-33 33-33H366c60.3 0 121.6 49.4 121.6 110.1v621s12.1 2.6 24.2 2.6 24.2-2.6 24.2-2.6v-621c0-60.7 61.3-110.1 121.6-110.1h222.1c18.2 0 33 14.8 33 33l-0.1 612.7z"
                p-id="8450"
                fill="#151515"
              ></path>
            </svg>
          </div>
          <div class="my-text text">{{ searchHint.text }}</div>
          <van-icon class="icon" name="arrow" />
        </div>
        <div
          class="search-hint-item-show"
          v-else
          @click.stop="toDetail(searchHint)"
        >
          <div class="img-box">
            <img :src="searchHint.cover" alt="" />
          </div>
          <div class="right">
            <div class="my-text title">{{ searchHint.text }}</div>
            <div class="my-text author">{{ searchHint.author }}</div>
            <div class="my-text des">{{ searchHint.d }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="search-detail" v-else-if="showSearchHint && showSearchDetail">
      <SearchDetail
        :searchIndex="searchIndex"
        :keyword="keyword"
        :searchList="searchList"
        @callSearchList="callSearchList"
      />
    </div>
  </div>
</template>

<script>
import SearchDetail from "./SearchDetail.vue";
export default {
  components: {
    SearchDetail,
  },
  data: () => {
    return {
      searchHistory: [],
      keyword: "",
      hotSearch: null,
      searchHintList: null,
      searchList: null,
      time: 0,
      showSearchHint: false,
      showSearchDetail: false,
      searchIndex: 0,
      page: 1,
      option: {
        sort: 0, //排序
        channel: 0, //频道
        bookStatus: 0, //完结状态
        pay: 0, //收费
        wordCount: 0, //字数
      },
    };
  },
  methods: {
    clearHistory(){
      this.api.toDetail(null,null,'clear');
      this.searchHistory = [];
    },
    //跳书籍详情
    toDetail(item) {
      this.api.toDetail(item, this, true);
    },
    callSearchList({ option, page }) {
      this.getSearchList(option, page);
    },
    //回车搜索
    onSearch() {
      this.showSearchDetail = true;
      this.searchIndex++; //用于子组件监听更新状态
      this.getSearchList();
      console.log(this.keyword, "111111");
    },
    onInput() {
      clearTimeout(this.time);
      if (!this.keyword.trim()) {
        this.showSearchHint = false;
        return;
      }
      this.time = setTimeout(() => {
        this.showSearchHint = true;
        this.getSearchHint();
      }, 1000);
    },
    onCancel() {
      this.showSearchHint = false;
      this.showSearchDetail = false;
      this.$router.go(-1);
    },
    //获取最终搜索结果
    getSearchList(option = this.option, page = this.page) {
      console.log(option, page, this.keyword);
      this.axios({
        method: "get",
        url: `${this.api.baseUrlData}/yunyuedu/search/book.json?keyword=${this.keyword}&page=${page}&sort=${option.sort}&channel=${option.channel}&bookStatus=${option.bookStatus}&pay=${option.pay}&wordCount=${option.wordCount}`,
      }).then((res) => {
        this.searchList = res.data.data.books;
        console.log(this.searchList);
      });
    },
    //获取搜索建议
    getSearchHint() {
      this.axios({
        method: "get",
        url: `${this.api.baseUrlData}/yunyuedu/search/searchHint?search=${this.keyword}`,
      }).then((res) => {
        this.searchHintList = res.data.words.w;
        console.log(this.searchHintList);
      });
    },
    //获取热门搜索
    getHotSearch() {
      this.axios({
        method: "get",
        url: `${this.api.baseUrlData}/yunyuedu/search/getHotWords`,
      }).then((res) => {
        this.hotSearch = res.data.list;
        console.log(this.hotSearch);
      });
    },
  },
  activated(){
    this.searchHistory = JSON.parse(localStorage.getItem("historySearch")) || [];
  },
  created() {
    this.getHotSearch();
  },
};
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  background-color: var(--bgc-gray3);
  overflow: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 0.55rem;
    box-sizing: border-box;
    background-color: var(--bgc-white);
  }
  .search-map {
    width: 100%;
    .hot-search {
      width: 100%;
      margin-top: 0.3rem;
      box-sizing: border-box;
      padding: 0 0.15rem;
      .hot-search-title {
        font-size: 0.14rem;
        color: var(--text-gray);
      }
      .hot-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 0.1rem 0;
      }
      .hot-item {
        width: 50%;
        font-size: 0.15rem;
        display: flex;
        align-items: center;
        margin: 0.1rem 0;
        .hot-item-index {
          width: 0.2rem;
          height: 0.2rem;
          margin: 0 0.1rem;
          background-color: var(--bgc-red);
          color: var(--text-white);
          font-size: 0.12rem;
          border-radius: 50%;
          text-align: center;
          line-height: 0.2rem;
        }
        .hot-item-name {
          font-size: 0.15rem;
        }
      }
    }
    .history-search {
      width: 100%;
      box-sizing: border-box;
      padding: 0.1rem 0.15rem;
      .history-search-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.14rem;
        color: var(--text-gray);
        .icon {
          font-size: 0.2rem;
        }
      }
      .history-content {
        width: 100%;
        padding: 0.2rem 0;
        display: flex;
        flex-wrap: wrap;
        .history-item {
          height: 0.3rem;
          line-height: 0.3rem;
          padding: 0 0.1rem;
          background-color: var(--bgc-gray);
          border-radius: 0.15rem;
          font-size: 0.14rem;
          margin-right: .1rem;
          margin-bottom: .1rem;
        }
      }
    }
  }
  .search-hint {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.15rem;
    .search-hint-item {
      width: 100%;
      height: 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--text-gray);
      border-bottom: 0.01rem solid var(--border-gray);
      .img-box {
        width: 0.2rem;
        min-width: 0.2rem;
        height: 0.2rem;
      }
      .text {
        flex-grow: 1;
        box-sizing: border-box;
        padding: 0 0.1rem;
        font-size: 0.16rem;
      }
      .icon {
        font-size: 0.2rem;
        min-width: 0.2rem;
      }
    }
    .search-hint-item-show {
      width: 100%;
      height: max-content;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--text-gray);
      border-bottom: 0.01rem solid var(--border-gray);
      padding: 0.15rem 0;
      .img-box {
        width: 0.54rem;
        min-width: 0.54rem;
        aspect-ratio: 54/72;
      }
      .right {
        flex-grow: 1;
        font-size: 0.12rem;
        margin-left: 0.1rem;
        padding: 0.05rem 0;
        .title {
          font-size: 0.16rem;
          color: var(--text-gray);
          margin-bottom: 0.02rem;
          color: var(--text-black);
        }
        .author {
          margin-bottom: 0.02rem;
        }
        .des {
          -webkit-line-clamp: 2;
        }
      }
    }
  }
}
</style>